
<!-- 地址编辑弹窗 -->
<template>
    <div class="ele-body">
        <a-card :title="addressModalApp.title" :bordered="false">
            <a-form
                    ref="form2"
                    :model="addressModalApp.address"
                    :rules="addressModalApp.rules"
                    :label-col="{md: {span: 7}, sm: {span: 24}}"
                    :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
                <a-row :gutter="16">
                                                                                                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="地址简称:" name="addressAbbreviation">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.addressAbbreviation"
                                                    placeholder="请输入地址简称"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="地址类别:" name="addressType">
                                                                                    <m-dict-select
                                                    v-model:value="addressModalApp.address.addressType"
                                                    placeholder="请选择地址类别"
                                                    dict="省"/>
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="业务id:" name="businessID">
                                                                                    <a-input-number
                                                    v-model:value="addressModalApp.address.businessID"
                                                    placeholder="请输入业务id"
                                                    :min="0"
                                                    :step="1"
                                                    class="ele-fluid"
                                            ></a-input-number>
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="详细地址:" name="detailedAddress">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.detailedAddress"
                                                    placeholder="请输入详细地址"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="省:" name="province">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.province"
                                                    placeholder="请输入省"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="市:" name="city">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.city"
                                                    placeholder="请输入市"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="区县:" name="district">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.district"
                                                    placeholder="请输入区县"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="街道地址:" name="streetAddress">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.streetAddress"
                                                    placeholder="请输入街道地址"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="地址经度:" name="addressLongitude">
                                                                                    <m-entity-select
                                                                                                    :default-value="addressModalApp.address.addressLongituName"
                                                    v-model:value="addressModalApp.address.addressLongitude"
                                                    placeholder="请选择地址经度"
                                                    module="sale"
                                                    entity=""
                                                    class="ele-fluid"
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="地址纬度:" name="addressLatitude">
                                                                                    <m-entity-select
                                                                                                    :default-value="addressModalApp.address.addressLatituName"
                                                    v-model:value="addressModalApp.address.addressLatitude"
                                                    placeholder="请选择地址纬度"
                                                    module="sale"
                                                    entity=""
                                                    class="ele-fluid"
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="邮编:" name="zipCode">
                                                                                    <a-input
                                                    v-model:value="addressModalApp.address.zipCode"
                                                    placeholder="请输入邮编"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                                                                                                                        
                    <a-col :md="12" :sm="24" :xs="24">
                        <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
                            <!--class="ele-pull-right"-->
                            <div v-if="addressModalApp.display">
                                <teleport to="#addressEditModalFooter">
                                    <div>
                                        <a-space size="middle">
                                            <a-button @click="addressListApp.editModalShowing=false">取消
                                            </a-button>
                                            <a-button
                                                    type="primary"
                                                    @click="onSubmit(addressModalApp.address)"
                                                    :loading="loading">提交
                                            </a-button>
                                            <!--<a-button v-if="!eid"
                                                      type="dashed"
                                                      @click="continueSubmit"
                                                      :loading="loading">继续提交
                                            </a-button>-->
                                        </a-space>
                                    </div>
                                </teleport>
                            </div>
                            <div v-if="!addressModalApp.display">
                                <a-space size="middle">
                                    <a-button @click="onBack()">返回列表</a-button>
                                    <a-button
                                            type="primary"
                                            @click="onSubmit(addressModalApp.address)"
                                            :loading="loading">提交
                                    </a-button>
                                    <!--<a-button v-if="!eid"
                                              type="dashed"
                                              @click="continueSubmit"
                                              :loading="loading">继续提交
                                    </a-button>-->
                                </a-space>
                            </div>

                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>

    </div>

</template>

<script>
    import {defineComponent, inject, reactive, onMounted} from 'vue'
    import {useRoute, useRouter} from "vue-router"
    import {AddressService} from "@/views/restaurant/sale/address/addressService";
    import {VXETable} from 'vxe-table'
    import {useStore} from "vuex";
    import regions from 'ele-admin-pro/packages/regions.js';

                                                                                                                                                                                                                                                                                                                                                                                                                            
                        import MDictSelect from "@/components/MDict/dictSelect";
                                                import MEntitySelect from "@/components/MEntity/entitySelect";
        
    export default defineComponent({
        components: {
                                                                MDictSelect,
                                                    MEntitySelect,
                    },
        setup() {
            // 省市区数据
            const cityData = regions
            const route = useRoute();
            const router = useRouter();
            const store = useStore();
            let routeId = route.params.id;
            let addressListApp = inject('addressListApp', reactive({}));
            const addressModalApp = reactive({
                id: null,
                    address: {},
                isEdit: false,
                display: false
            });
                addressModalApp.rules = {
                                                                                                                                                                            addressAbbreviation: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入地址简称',
                                trigger: 'blur'
                            }
                        ],
                                                                                    addressType: [
                                                                                                                {
                            required:                                 true ,
                                type: 'string',
                                message: '请输入地址类别',
                                trigger: 'blur'
                            }
                        ],
                                                                                    businessID: [
                                                                                                                {
                            required:                                 true ,
                                type: 'number',
                                message: '请输入业务id',
                                trigger: 'blur'
                            }
                        ],
                                                                                    detailedAddress: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入详细地址',
                                trigger: 'blur'
                            }
                        ],
                                                                                    province: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入省',
                                trigger: 'blur'
                            }
                        ],
                                                                                    city: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入市',
                                trigger: 'blur'
                            }
                        ],
                                                                                    district: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入区县',
                                trigger: 'blur'
                            }
                        ],
                                                                                    streetAddress: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入街道地址',
                                trigger: 'blur'
                            }
                        ],
                                                                                    addressLongitude: [
                                                                                                                {
                            required:  false ,
                                type: 'number',
                                message: '请输入地址经度',
                                trigger: 'blur'
                            }
                        ],
                                                                                    addressLatitude: [
                                                                                                                {
                            required:  false ,
                                type: 'number',
                                message: '请输入地址纬度',
                                trigger: 'blur'
                            }
                        ],
                                                                                    zipCode: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入邮编',
                                trigger: 'blur'
                            }
                        ],
                                                                                                                                                                                                }

            onMounted(() => {
                //清理数据
                    addressModalApp.address = reactive({});
                if (routeId) {//路由
                        addressModalApp.id = routeId;
                        addressModalApp.display = false;
                    findAddress(addressModalApp.id);
                } else if (addressListApp.editModalForEdit) {//修改弹窗
                        addressModalApp.id = addressListApp.currentId;
                        addressModalApp.display = true;
                } else if (!addressListApp.editModalForEdit && addressListApp.addModalForEdit) {//新增弹窗
                        addressModalApp.display = true;
                } else {
                        addressModalApp.title = "新增学生";
                }
                if (addressModalApp.id) findAddress(addressModalApp.id);
            })

            const findAddress = (id) => {
                    AddressService.findAddressForView(id).then((res) => {
                        addressModalApp.address = res.data;
                    //TODO:为编辑准备.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    addressModalApp.title = "编辑学生 " + addressModalApp.address.name;
                }).catch(error => {
                    VXETable.modal.message({content: `查找学生出错，原因是：${error.message}`, status: 'error'});
                })
            }

            /*TODO:提交 新增&编辑*/
            const onSubmit = (data) => {
                // debugger;
                //当为数组时用逗号连接
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        if (data.eid) {
                    //修改
                        AddressService.updateAddress(data).then((res) => {
                        console.log(res);
                        VXETable.modal.message({content: '操作成功', status: 'success'});
                        setTimeout(onBack, 3000);
                    }).catch(error => {
                        VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
                    })
                } else {
                    //新增
                        AddressService.saveAddress(data).then((res) => {
                        console.log(res);
                        VXETable.modal.message({content: '操作成功', status: 'success'});
                        setTimeout(onBack, 3000);
                    }).catch(error => {
                        VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
                    })
                }
            }

            /*TODO:继续提交*/
            const continueSubmit = () => {
                VXETable.modal.message({content: 'error 提示', status: 'error'});
            }

            /*TODO:返回列表*/
            const onBack = () => {
                router.push(`/restaurant/sale/address`);
                store.dispatch('user/tabRemove', route.fullPath);

            }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                return {
                cityData,
                routeId,
                    addressListApp,
                    addressModalApp,
                onSubmit,
                continueSubmit,
                onBack,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }

        },
    })
</script>

<style scoped>

</style>
